<template>
	<view class="chooseMajor" v-if="showCollege">
		<view class="layer">
			<view class="layerMain">
				<view class="flex alignCenter justConBetween font14 oper">
					<view class="" @click="cancel">取消</view>
					<view class="colorMain" @click="clickSure">确定</view>
				</view>
				<view class="flex justConBetween font14">
					<scroll-view scroll-y="true" class="scrollPro">
						<view :class="(activeCollege && activeCollege.id==item.id)?'proItem activePro':'proItem'" v-for="(item,index) in college" :key="index" @click="chooseColl(item)">{{item.title}}</view>
					</scroll-view>
					<view class="schoolBox font14">
						<!-- <view class="search"><input class="font14" type="text" v-model="searchVal" placeholder="请输入大学名"></view> -->
						<text :class="(activeMajor && activeMajor.id==item.id)?'schoolItem active font12':'schoolItem font12'" v-for="(item,index) in major" :key="index" @click="chooseMajor(item)">{{item.title}} <i v-if="item.starStatus" class="iconfont icon-shoucang"></i></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getCollegeBySch,getMajorByColl } from "@/api/index.js"
	export default {
		name:"uni-choosesmajor",
		props:{
			showCollege:{
				type:Boolean,
				default:false
			},
			school:{
				type:Object,
				default(){
					return{}
				}
			}
		},
		data() {
			return {
				searchVal:'',
				college:[],
				major:[],
				activeCollege:'',
				activeMajor:''
			};
		},
		created() {
			this.getCollegeList()
		},
		methods:{
			getCollegeList(){
				let param={
					schoolCode: this.school.schoolCode,
					year:new Date().getFullYear()
				}
				getCollegeBySch(param).then((res)=>{
					if(res.code==100000){
						this.college=res.data
						console.log('学院',res)
						this.activeCollege=res.data[0]
						this.getMajorList()
					}
				})
			},
			getMajorList(){
				let param={
					collegeCode:this.activeCollege.code,
					schoolCode:this.school.schoolCode,
					year:new Date().getFullYear()
				}
				getMajorByColl(param).then((res)=>{
					if(res.code==100000){
						this.major=res.data
					}
				})
			},
			chooseColl(item){
				this.activeCollege=item
				this.getMajorList()
			},
			chooseMajor(item){
				this.activeMajor=item
			},
			cancel(){
				this.$emit('cancelColl')
			},
			clickSure(){
				console.log('专业',this.activeMajor)
				if(!this.activeMajor){
					uni.showToast({
						icon:'none',
						title:'请先选择专业！'
					})
					return
				}
				this.$emit('majorSuccess',{college:this.activeCollege,major:this.activeMajor})
			}
		}
	}
</script>

<style lang="scss" scoped>
@import "@/static/public.scss";
.chooseMajor{
	position: fixed;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	top:0;
	left:0;
	z-index: 100;
	.layer{
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
	}
	.layerMain{
		background: #fff;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		border-radius: 32rpx;
		padding: 30rpx 0 0;
		box-sizing: border-box;
		.oper{
			// margin:0 0 60rpx;
			padding: 0 40rpx 30rpx;
			border-bottom: 1px solid #F8F9FC;
		}
		.proItem{
			background: #f2f2f2;
			text-align: center;
			padding: 30rpx 10rpx;
		}
		.activePro{
			background: #fff;
		}
		.scrollPro{
			height:60vh;
			overflow-y: scroll;
		}
		.schoolBox{
			height:60vh;
			overflow-y: scroll;
			flex:0 0 70%;
			flex-shrink: 0;
			padding: 30rpx;
			box-sizing: border-box;
			.schoolItem{
				display: inline-block;
				margin: 0 10rpx 20rpx 0;
				height:60rpx;
				line-height: 60rpx;
				border-radius: 60rpx;
				padding: 0 30rpx;
				border: 1px solid $colorMain;
				i{
					color: $colorMain;
				}
			}
			.nochoose{
				background: #F8F9FC;
				border:1px solid #F8F9FC;
			}
			.active{
				background:$colorMain;
				color:$color333;
			}
			.search{
				margin: 0 0 20rpx 0;
				input{
					border:1px solid #f2f2f2;
					border-radius: 40rpx;
					height: 60rpx;
					line-height: 60rpx;
					padding: 0 0 0 20rpx;
				}
			}
		}
	}
}
</style>